<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        属性节点(html属性)
        (1)写在标签内,和标签名以一个空格分隔叫做属性, 
        (2)组成: 属性名="属性值" 
        (3)属性可以没有也可以有多个,多个之间用空格分隔
            属性是对标签的说明
    -->
    <div class="" id="" title="" >123123</div>
    <!-- <div class="" id="" title="" >123123</div> -->
</body>
<script>
    // JS组成
    // ECMAScript  => js语法规范(ES5 -> ES6)
    // BOM (Browser Object Model)  浏览器对象模型 => 提供了操作浏览器的接口和方法
    // DOM (Document Object Model) 文档对象模型 => 提供了操作文档的接口和方法

    // document     文档(对象)
    // (1) html页面载入到浏览器中就会变为文档的一部分
    // (2) 通过文档可以获取和操作页面中的元素 (获取元素 操作元素 => 改变元素内容 属性 文本内容 样式 绑的事件 , 元素的增删改查  => DOM操作)

    // 浏览器窗口(window 全局对象)  -> 文档(document) -> html  -> body -> xxx
    // window是全局对象 => 存放浏览器中的全局变量,方法,对象
    // document是window子对象  => window.document => window可以省略

    // HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准，即操作HTML的元素   (获取元素 操作元素 => 改变元素内容 属性 文本内容 样式 绑的事件 , 元素的增删改查  => DOM操作)

    console.log(document);  

    /* 
    DOM节点：
        根据 W3C 的 HTML DOM 标准，HTML文档中的所有内容都是节点：
        html    JS
        文档  文档节点
        标签  元素节点
        属性  属性节点(html属性)
        文本  文本节点
        注释  注释节点

        整个文档是一个文档节点 
        每个 HTML 元素是元素节点 
        HTML 元素内的文本是文本节点 
        每个 HTML 属性是属性节点 
        注释是注释节点 

        节点也是一个特殊的对象;


    节点的层级关系:
        父节点
        子节点
        兄弟节点/同胞节点
        根节点(html)  => 根节点没有父节点


    
    */

 


</script>
</html>